<!doctype html>
<html>
<head>

<title>How to Parse a JSON file using jQuery</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>


<style>
body {
	text-align: center;
	font-family: arial;
}

.button, btnAll {
	margin: 20px;
	font-size: 16px;
	font-weight: bold;
	padding: 5px 10px;
}

table a:link {
	color: #666;
	font-weight: bold;
	text-decoration: none;
}

table a:visited {
	color: #999999;
	font-weight: bold;
	text-decoration: none;
}

table a:active,table a:hover {
	color: #bd5a35;
	text-decoration: underline;
}

table {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 12px;
	text-shadow: 1px 1px 0px #fff;
	background: #eaebec;
	margin: 20px;
	border: #ccc 1px solid;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}

table th {
	padding: 21px 25px 22px 25px;
	border-top: 1px solid #fafafa;
	border-bottom: 1px solid #e0e0e0;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed),
		to(#ebebeb));
	background: -moz-linear-gradient(top, #ededed, #ebebeb);
}

table th:first-child {
	text-align: left;
	padding-left: 20px;
}

table tr:first-child th:first-child {
	-moz-border-radius-topleft: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
}

table tr:first-child th:last-child {
	-moz-border-radius-topright: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
}

table tr {
	text-align: center;
	padding-left: 20px;
}

table td:first-child {
	text-align: left;
	padding-left: 20px;
	border-left: 0;
}

table td {
	padding: 18px;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb),
		to(#fafafa));
	background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

table tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8),
		to(#f6f6f6));
	background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}

table tr:last-child td {
	border-bottom: 0;
}

table tr:last-child td:first-child {
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

table tr:last-child td:last-child {
	-moz-border-radius-bottomright: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

table tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2),
		to(#f0f0f0));
	background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
</style>


</head>
<body>
	<input type="button" value="Get and parse JSON" class="button" />
	<input type="button" value="Get All JSON" class="btnAll" />
	<span class="wait"><H1>Please waiting...</H1></span>
	<div id="result"> </div>
	<br />

	<table class="tbl" style="width: 100%">
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
	</table>

	<span id="results"></span>
	<script>
		//When DOM loaded we attach click event to button
		$(document).ready( function() {

					$('.tbl').hide();
					$('.wait').hide();
					
					//Table TR click event
					$(".tbl td").click(function() {
				     	alert($(this));
				     });
					
					//after button is clicked we download the data
					$('.button').click(
							function() {

								//start ajax request
								$.ajax({
									url : "/rest/get/khangpn",
									//force to handle it as text
									dataType : "text",
									type : "POST",
									success : function(data) {

										//data downloaded so we call parseJSON function 
										//and pass downloaded data
										var json = $.parseJSON(data);
										//now json variable contains data in json format
										//let's display a few items
										$('.tbl').append(
												"<tr><td>" + json.name
														+ "</td>" + "<td>"
														+ json.age
														+ "</td></tr>");
										if(json != null) {
											$('.tbl').show();
										}
									}
								});
							});
					//Button All click
					$('.btnAll').click(
							function() {

								//start ajax request
								$.ajax({
									url : "/rest/get/all",
									//force to handle it as text
									format : "json",
									type : "GET",
									beforeSend: function() { $('.wait').show(); },
							        complete: function() { $('.wait').hide(); },
									success : function(data) {
										 $.each( data, function( i, item ) {
											 $('.tbl').append(
														"<tr><td class='name'>" + item.name
																+ "</td>" + "<td class='age'>"
																+ item.age
																+ "</td></tr>");
											 });
										 if(data.length > 0) {
											 $('.tbl').show();
											 $(".tbl td").click(function(e) {    
												 
										            /* var column_num = parseInt( $(this).index() ) + 1;
										            var row_num = parseInt( $(this).parent().index() )+1;
										            var value = $(this).text();
										 
										            $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ column_num +
										            		", Value = " + value); */
										            
										         // consuem event
										         var row_num = parseInt($(this).parent().index());
										         revert(row_num);
										            e.preventDefault();
										            e.stopImmediatePropagation();

										            $td = $(this);

										            // if already editing, do nothing.
										            if ($td.data('editing')) return;
										            // mark as editing
										            $td.data('editing', true);

										            // get old text
										            var txt = $td.text();

										            // store old text
										            $td.data('oldText', txt);

										            // make input
										            var $input = $('<input type="text" class="editfield">');
										            $input.val(txt);

										            // clean td and add the input
										            $td.empty();
										            $td.append($input);
										            
										        });
										 }
										
									}
								});
							});
				});
		
		$(document).click(function (e) {	
			revert(-1);
		});
		
		function revert(row_num) {
	        $(".tbl .editfield").each(function (index) {
	        	if(index != row_num) {
	        		var $td = $(this).closest('td');
		            $td.empty();
		            $td.text($td.data('oldText'));
		            $td.data('editing', false);

		            // canceled            
		            console.log('Edit canceled.' + row_num + ' - ' + index);	
	        	}
	        });
	    }
		
	</script>

</body>
</html>